<template>
  <view class="pb-50">
    <u-navbar title="保养详情" :background="{ backgroundColor:'#9CE0FF'}" :border-bottom="false" title-color="#000" title-size="37" />
    <view class="mt-20">
      <sub-title class="mt-20" title="设备信息"></sub-title>
    </view>
    <view class="p-lr-40 mb-20">
      <view class="fz-30 lh-42 color-888888 mt-20 flex justify-between">
        <text class="w-200">设备名称</text>
        <view class="flex1 text-right">
          <text>{{ deviceInfo.name || '-'}}</text>
        </view>
      </view>
      <view class="fz-30 lh-42 color-888888 mt-20 flex justify-between">
        <text class="w-200">设备编号</text>
        <view class="flex1 text-right">
          <text>{{ deviceInfo.deviceNo || '-'}}</text>
        </view>
      </view>
      <view class="fz-30 lh-42 color-888888 mt-20 flex justify-between">
        <text class="w-180">设备购买时间</text>
        <view class="flex1 text-right">
          <text>{{ deviceInfo.purchaseDate || '-'}}</text>
        </view>
      </view>
      <view class="fz-30 lh-42 color-888888 mt-20 flex justify-between">
        <text class="w-200">设备类型</text>
        <view class="flex1 text-right">
          <text>{{ deviceInfo.categoryName || '-'}}</text>
        </view>
      </view>
    </view>
    <sub-title title="保养详情"></sub-title>
    <view class="p-lr-40 mt-20" v-for="(item, index) in planDeviceStandardDetailList" :key="index">
      <view class="flex align-center justify-between">
        <view class="p-lr-20 fz-32 lh-60 h-60 br-30 bg-FF9900 color-fff flex">
          <text>{{item.projectName}}</text>
        </view>
        <text class="fz-32 color-19BE6B">{{item.result || '-'}}</text>
      </view>
      <view class="pl-20 mt-28 fz-32 lh-45 flex justify-between" v-if="item.maintenanceType.indexOf('1') > -1">
        <text>清洗数量</text>
        <text class="color-19BE6B">{{item.washValue || item.washValue === 0 ? item.washValue : '-'}}</text>
      </view>
      <view class="pl-20 mt-28 fz-32 lh-45 flex justify-between" v-if="item.maintenanceType.indexOf('2') > -1">
        <text>更换数量</text>
        <text class="color-19BE6B">{{ (item.replaceValue || 0) +  (item.recordList && item.recordList.length || 0) }}</text>
      </view>
      <view class="pl-20 mt-28 fz-32 lh-45 flex justify-between" v-if="item.maintenanceType.indexOf('2') > -1">
        <text>替换备件</text>
        <text class="color-19BE6B">{{item.partName || '-'}}</text>
      </view>
      <view class="text-right m-tb-20 fz-32 lh-45" v-if="item.recordList && item.recordList.length > 0" >
        <view v-for="(item,index) in item.recordList" :key="index">
          <text>{{ item.newSpareBarcode || '-' }}</text>
          <text class="p-lr-30">替换</text>
          <text>{{ item.oldSpareBarcode || '-' }}</text>
        </view>
      </view>
      <view class="flex flex-wrap mt-28" v-if="item.images && item.images.length">
        <view class="w-150 h-150 bg-CCCCCC mr-30 mb-10" v-for="(imagesItem,imagesIndex) in item.images" :key="imagesIndex">
          <image class="w-150 h-150 mr-30 mb-10" :src="imagesItem.url" @tap="previewImage(item.images, imagesIndex)"></image>
        </view>
       </view>
    </view>
  </view>
</template>

<script>
import SubTitle from "@/components/SubTitle/SubTitle";
import {workOrderDeviceProject} from "@/api/maintenance/workOrderDevice";
import {device} from "@/api/hospital/device";
export default {
  name: "check-item-detail",
  components: {SubTitle},
  data(){
    return {
      deviceId:'',
      workOrderId:'',
      workOrderDeviceId:'',
      deviceInfo:{},
      planDeviceStandardDetailList:[],
      fromCheckedHistory: 0,
      isModalShow: false,
      modalContent: '',
    }
  },
  onLoad(options){
    this.workOrderId = options.workOrderId
    this.deviceId = options.deviceId
    this.workOrderDeviceId = options.workOrderDeviceId
    this.fromCheckedHistory = options?.fromCheckedHistory || 0
  },
  onShow(){
    this.doQuery()
  },
  methods:{
    doQuery(){
      workOrderDeviceProject(this.workOrderDeviceId).then(res => {
        this.planDeviceStandardDetailList = res.data
      })
      device(this.deviceId).then(res => {
        this.deviceInfo = res.data
      })
    },
    // 点击预览
    previewImage(url, index) {
      const urls = url.map(item => {
        return item.url
      })
      uni.previewImage({
        urls, //需要预览的图片链接列表
        current: index,
        indicator: "none", //图片指示器样式 "default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器
      });
    },
  }
}
</script>

<style lang="scss">
page{
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.resultArrayItem > text:not(:last-child):after{
  content: ',';
}
</style>
